@include('Home.head')
<style type="text/css">
    .find-font-store {
        font-size: 13px;
        color: #5db95d;
    }

    #store_keyword_btn {
        width: 70px;
        height: 35px;
        margin-left: 5%;
        text-align: center;
        border: none;
        outline: none;
        border-radius: 5px;
        background: #5cb95c;
        color: #fff;
        margin-top: 1%;
    }

    #store_keyword {
        width: 72%;
        float: left;
    }

    .am-img-responsive {
        width: 100%;
        height: 100%;
    }

    @media screen and (max-width: 639px) {
        .cart-panel-ul > li {
            height: auto;
        }
    }
</style>

<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{title}}</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
    <div id="allmap"></div>
    <div class="gray-panel">
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">订</span> 确认订单信息</h2>
            <div>
                <div class="cart-list-panel">
                    <ul class="am-avg-sm-1 cart-panel-ul">
                        <li style="display: flex">
                            <div class="imgpanel"><a><img :src="order.img" class="am-img-responsive"/></a></div>
                            <div class="infopanel">
                                <h3><a>@{{ order.goodsname }}</a></h3>
                                <p>品牌：新世界</p>
                                <p>价格：<span class="red2 bold">@{{ order.price }}</span> 元 X @{{ order.number }}</p>
                                <p v-show="order.specs_txt">规格：@{{ order.specs_txt }}</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="cart_foot">
                    总数量：<span class="red2 bold" id="total_jifen">@{{ order.number }}</span> 件，
                    邮费：<span class="red2 bold" id="total_amount">@{{ freight }}</span>
                    总价：<span class="red2 bold" id="total_amount">@{{ order.totalPrice }}</span>元
                </div>
            </div>
        </div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2">
                <span class="am-badge am-round am-badge-warning ">收</span> 收货地址
                <label class="am-checkbox-inline" style="float: right;margin-right: 15px">
                    <input type="checkbox" data-am-ucheck v-on:click="pickSelf()"> 自提
                </label>
            </h2>

            <div class="partners-title-panel">
                <div class="partners-title-panel-title" v-if="address != false"
                     style="height: 80px;padding-left: 10px;">
                    @{{ address.name }} &nbsp;@{{ address.phone }} <a href="/home/member/addresslist"
                                                                      v-show="address.default"
                                                                      style="color: red;float: right;margin-right: 20px">修改地址</a><br>
                    <a
                            style="width:100%;height:49px;font-size: 12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">@{{
                        address.province }}@{{ address.city }}@{{ address.district }}@{{ address.address }}</a>
                </div>
                <div v-if="address == false">
                    <p class="am-text-center" onclick="window.location.href='/home/member/address'">
                        <button type="button"
                                class="am-btn am-btn-default am-radius am-btn-block">添加收货地址
                        </button>
                    </p>
                </div>
            </div>
        </div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">支</span> 支付方式
            </h2>
            <ul class="am-list am-text-sm my-pay-ul" v-if="moneyCode != 0">
                <li><a href="javascript:;">&nbsp;&nbsp;&nbsp;<img src="/img/home/user/money.png"
                                                                  class="payimg"/>&nbsp;&nbsp;&nbsp;&nbsp;代金券
                        <samll class="my-pay-yue">：<span
                                    class="red2">@{{ money.data.voucher }}</span></samll>
                    </a></li>
                <li><a href="javascript:;">&nbsp;&nbsp;&nbsp;<img src="/img/home/user/money.png"
                                                                  class="payimg"/>&nbsp;&nbsp;&nbsp;&nbsp;电子币
                        <samll class="my-pay-yue">：<span
                                    class="red2">@{{ money.data.credit1 }}</span></samll>
                    </a></li>
                <li><a href="javascript:;">&nbsp;&nbsp;&nbsp;<img src="/img/home/user/money.png"
                                                                  class="payimg"/>&nbsp;&nbsp;&nbsp;&nbsp;奖励币
                        <samll class="my-pay-yue">：<span
                                    class="red2">@{{ money.data.credit2 }}</span></samll>
                    </a></li>
                <li><a href="javascript:;">&nbsp;&nbsp;&nbsp;<img src="/img/home/user/money.png"
                                                                  class="payimg"/>&nbsp;&nbsp;&nbsp;&nbsp;积分
                        <samll class="my-pay-yue">：<span
                                    class="red2">@{{ money.data.credit4 }}</span></samll>
                    </a></li>
            </ul>
            <ul class="am-list am-text-sm my-pay-ul" v-if="moneyCode == 0">
                <span class="red2">余额不足</span>
                <!-- <span class="red2">哈哈</span> -->
            </ul>
            <div>
                <ul class="am-avg-sm-2 am-text-center">
                    <li class="am-text-center am-padding-sm" v-if="status == 0">
                        <button type="button" v-on:click="payBefore()"
                                class="am-btn am-btn-danger am-btn-block am-radius">确定支付
                        </button>
                    </li>
                    <li class="am-text-center am-padding-sm" v-if="status == 1">
                        <button type="button"
                                class="am-btn am-btn-danger am-btn-block am-radius" disabled="disabled">支付中..
                        </button>
                    </li>
                    <li class="am-text-center am-padding-sm">
                        <button type="button" v-on:click="goPurchase()"
                                class="am-btn am-btn-success am-btn-block am-radius">@{{goon}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '提交订单',
            order: {},
            address: {
                // id:'',
            },
            money: {},
            status: 0,
            pick: 0,
            totalPay: 0,
            type: '',
            moneyCode: '',
            goon: '继续购物',
            freight: '',
            flag: true
        },
        methods: {
            //初始化
            initialize: function () {
                var id = this.obtain('id');
                $.post("/home/order", {
                    '_token': '{{csrf_token()}}',
                    class: 'find',
                    id: id,
                    again: 0
                }, function (res) {
                     //console.log(res);
                    if (res.code) {
                        //console.log(res)
                        app.order = res.data.order.OrderComment[0]
                        app.freight = res.data.order.freight
                        app.address = res.data.address
                        app.money = res.data.moeny
                        app.moneyCode = res.data.moeny.code
                        app.totalPay = app.order.totalPrice
                        //console.log(app.order)
                    }
                });
            },

            pickSelf: function () {
                var is_check = $("input[type='checkbox']").is(':checked');
                if (is_check == true) {
                    app.pick = 1;
                } else {
                   app.pick = 0; 
                }
                $.post("/home/timeShop/order", {
                    '_token': '{{csrf_token()}}',
                    class: 'pickSelf',
                    totalPay: app.totalPay,
                    freight: app.freight,
                    pick: app.pick,
                    money: app.money.data
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code) {
                        layer.msg(res.data);
                        app.moneyCode = 1;
                        //console.log(res)
                        app.money = res.rico;
                    } else {
                        app.moneyCode = 0;
                        layer.msg(res.data);
                    }
                });
            },
            //支付
            payBefore: function () {
                if (!this.flag) {
                    layer.msg('请勿重复提交')
                    return false
                }
                this.flag = false
                var id = this.obtain('id');
                if (id > 0) {
                    if (app.address.id == undefined) {
                        layer.msg('请选择收货地址');
                        return false;
                    }
                    if (app.moneyCode == 0) {
                    	layer.msg('余额不足');
                        return false;
                    }
                    if (app.status == 0) {
                        app.status = 1;
                        layer.msg('支付中', {
                            icon: 16,
                            shade: 0.01
                        });
                        $.post("/home/timeShop/order", {
                            '_token': '{{csrf_token()}}',
                            class: 'pay',
                            id: id,
                            pick: app.pick,
                            freight: app.freight,
                            addressId: app.address.id,
                            money: app.money.data
                        }, function (res) {
                            // console.log(res)
                            app.flag = true
                            layer.closeAll('loading');
                            if (res.code) {
                                layer.msg(res.data, {
                                    time: 500
                                }, function () {
                                    location.replace('/home/member/myoreder')
                                });
                            } else {
                                app.status = 0;
                                layer.msg(res.data);
                            }
                        });
                    } else {
                        layer.msg('支付中..');
                        return;
                    }
                }
            },
            //获取url id
            obtain: function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == val) {
                        return pair[1];
                    }
                }
            },
            // 继续进货
            goPurchase: function () {
                window.location.href = '/home/timeShop/index';
            }
        },
        created() {
            this.type = this.obtain('type')
            // console.log(this.type)
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>

</html>